<template>
  <div class="profile" v-if="_userInfo">
    <div class="banner flex flex-jc-c flex-ai-c">
      <div class="user-info flex flex-fd-c flex-jc-c flex-ai-c">
        <img
          v-if="!_userInfo.avatar"
          src="~@/assets/images/default-avatar.png"
          alt=""
          srcset=""
        />
        <img v-else :src="_userInfo.avatar" alt="" srcset="" />
        <h2 class="name">{{ _userInfo.nickname || 'user' }}</h2>
        <h3 class="phone">{{ _userInfo.phone || '-' }}</h3>
      </div>
    </div>
    <div class="container-1200 mb-48">
      <div class="record flex mb-48">
        <div
          class="flex flex-fd-c flex-jc-c flex-ai-c cursor-p"
          style="margin-right: 48px"
        >
          <div
            class="icon flex flex-jc-c flex-ai-c"
            @click="go('/profile/browse')"
          >
            <img
              class="mb-18"
              src="~@/assets/images/icon-browse.png"
              alt=""
              srcset=""
            />
          </div>
          <span>浏览记录({{ _userInfo.browse_count }})</span>
        </div>
        <div
          class="flex flex-fd-c flex-jc-c flex-ai-c cursor-p"
          @click="go('/profile/attention')"
        >
          <div class="icon flex flex-jc-c flex-ai-c">
            <img
              class="mb-18"
              src="~@/assets/images/icon-attention.png"
              style=""
              alt=""
            />
          </div>
          <span>我的关注({{ _userInfo.collect_count }})</span>
        </div>
      </div>
      <div class="rest flex">
        <div
          class="flex flex-fd-c flex-jc-c flex-ai-c cursor-p"
          style="margin-right: 48px"
          @click="go('/profile/rental/put')"
        >
          <div class="icon flex flex-jc-c flex-ai-c">
            <img
              class="mb-18"
              src="~@/assets/images/icon-rental.png"
              alt=""
              srcset=""
            />
          </div>
          <span>我的出租</span>
        </div>
        <div
          class="flex flex-fd-c flex-jc-c flex-ai-c cursor-p"
          @click="go('/profile/rental/entrust')"
        >
          <div class="icon flex flex-jc-c flex-ai-c">
            <img
              class="mb-18"
              src="~@/assets/images/icon-rental-record.png"
              style=""
              alt=""
            />
          </div>
          <span>我的委托</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['_userInfo']),
  },
  watch: {},
  methods: {
    go(url) {
      this.$router.push(url)
    },
  },
}
</script>

<style lang="less" scoped>
.profile {
  .mb-48 {
    margin-bottom: 48px;
  }
  .mb-18 {
    margin-bottom: 18px;
  }
  .banner {
    height: 510px;
    background-image: url(~@/assets/images/profile_bg.png);
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 60px;
    .user-info {
      color: white;
      .name {
        font-size: 42px;
        font-weight: bold;
        margin-top: 24px;
      }
      .phone {
        font-size: 24px;
        margin-top: 18px;
      }
    }
  }
  .record {
    padding: 30px 0 60px;
    border-bottom: 1px solid #f4f4f4;
  }
  .icon {
    width: 60px;
    height: 60px;
  }
}
</style>
